<template>
  <el-drawer :title="dialogTitle" v-model="dialogVisible" size="85%">
    <el-row :gutter="6" class="row">
      <el-col :md="24" :sm="24" :xs="24" :loading="loading">
        <el-card shadow="never" v-loading="loading">
          <template #header>
            <CardTitle title="退款信息" />
          </template>
          <el-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            label-width="80px"
            v-loading="formLoading"
          >
            <el-row>
                <el-col :md="10" :sm="12" :xs="24">
                  <el-form-item label="退款金额" prop="refundPrice">
                    <el-input v-model="formData.refundPrice" class="!w-100px" @input="handlePrice" >
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="退款原因" prop="refundReason">
                    <el-input type="textarea" v-model="formData.refundReason" :rows="3" />
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="submitForm()" type="danger" :disabled="formLoading">确认退款</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
          </el-form>
        </el-card>

      </el-col>

    </el-row>

    <el-skeleton :loading="loading" animated>
      <el-card class="mt-5px">
        <el-row >
          <el-col :span="24" class="mt-3 mb-3">
            <div class="flex items-center dawn-head-p" >
              <span class="text-4 dawn-color-title">{{ formData.orderNumber }}</span>
<!--              <span class="text-4 ">｜</span>-->
<!--              <span class="text-4 ">{{ formData.title }}</span>-->
              <span class="text-4 ">｜</span>
              <el-tag v-if="formData.payStatus === 0" type="info" >待支付</el-tag>
              <el-tag v-else-if="formData.payStatus === 1" type="primary" >支付中</el-tag>
              <el-tag v-else-if="formData.payStatus === 2" type="success" >支付成功</el-tag>
              <el-tag v-else-if="formData.payStatus === 3" type="danger" :show-overflow-tooltip="true">
                支付失败 {{ formData.remark }}
              </el-tag>
              <el-tag v-else-if="formData.payStatus === 4" type="warning" >已撤销</el-tag>
              <el-tag v-else-if="formData.payStatus === 5" type="warning" >已退款</el-tag>
              <el-tag v-else-if="formData.payStatus === 6" type="warning" >订单关闭</el-tag>
              <el-tag v-else-if="formData.payStatus === 7" type="warning" >部分退款</el-tag>
            </div>
          </el-col>
          <el-col :span="24">
            <table class="medical-record-table">
              <tr>
                <td class="medical-record-fill-color"> 病人姓名 </td>
                <td style="width: 120px"> {{ formData.patientName }} </td>
                <td class="medical-record-fill-color"> 身份证号 </td>
                <td class=""> {{ formData.idCardNo }} </td>
                <td class="medical-record-fill-color"> 病人ID </td>
                <td> {{ formData.patientId }} </td>
                <td class="medical-record-fill-color"> 门诊号 </td>
                <td> {{ formData.clinicNo }} </td>
              </tr>
              <tr>
                <td class="medical-record-fill-color"> HIS订单号 </td>
                <td class="dawn-color-flag" colspan="3"> {{ formData.hisOrderNo }} </td>
                <td class="medical-record-fill-color"> HIS单据号 </td>
                <td class="dawn-color-flag" colspan="3"> {{ formData.hisBillNos }} </td>
              </tr>
              <tr>
                <td class="medical-record-fill-color"> 订单类型 </td>
                <td class="dawn-color-flag"> {{ formData.orderType }} </td>
                <td class="medical-record-fill-color"> 标题 </td>
                <td class="dawn-color-flag" colspan="3"> {{ formData.title }} </td>
                <td class="medical-record-fill-color"> 创建时间 </td>
                <td class=""> {{ formatTime(formData.createTime, 'yyyy-MM-dd HH:mm:ss') }} </td>
              </tr>
            </table>

            <table class="medical-record-table mt-5">
              <tr>
                <td class="medical-record-fill-color"> 支付订单号 </td>
                <td style="width: 210px"> {{ formData.payOrderId }} </td>
                <td class="medical-record-fill-color"> 渠道订单号 </td>
                <td style="width: 210px"> {{ formData.thirdOrderNo }} </td>
                <td class="medical-record-fill-color"> 支付状态 </td>
                <td>
                  <el-tag v-if="formData.payStatus === 0" type="info" >待支付</el-tag>
                  <el-tag v-else-if="formData.payStatus === 1" type="primary" >支付中</el-tag>
                  <el-tag v-else-if="formData.payStatus === 2" type="success" >支付成功</el-tag>
                  <el-tag v-else-if="formData.payStatus === 3" type="danger" :show-overflow-tooltip="true">
                    支付失败
                  </el-tag>
                  <el-tag v-else-if="formData.payStatus === 4" type="warning" >已撤销</el-tag>
                  <el-tag v-else-if="formData.payStatus === 5" type="warning" >已退款</el-tag>
                  <el-tag v-else-if="formData.payStatus === 6" type="warning" >订单关闭</el-tag>
                  <el-tag v-else-if="formData.payStatus === 7" type="warning" >部分退款</el-tag>
                </td>
                <td class="medical-record-fill-color"> 支付金额(元) </td>
                <td style="width: 150px">
                  <el-tag type="success">{{ formData.amount }}</el-tag>
                </td>
              </tr>
              <tr>
                <td class="medical-record-fill-color"> 支付时间 </td>
                <td> {{ formatTime(formData.payTime, 'yyyy-MM-dd HH:mm:ss') }}</td>
                <td class="medical-record-fill-color"> 支付方式 </td>
                <td> {{ formData.payModeName }} | {{ formData.payTypeId }} </td>
                <td class="medical-record-fill-color"> 退款订单号 </td>
                <td> {{ formData.refundNumber }} </td>
                <td class="medical-record-fill-color"> 退款金额(元) </td>
                <td>
                  <el-tag type="danger">{{ formData.refundPrice }}</el-tag>
                </td>
              </tr>
              <tr>
                <td class="medical-record-fill-color"> 退款时间 </td>
                <td> {{ formatTime(formData.refundTime, 'yyyy-MM-dd HH:mm:ss') }}</td>
                <td class="medical-record-fill-color"> 退款原因 </td>
                <td colspan="3"> {{ formData.refundReason }} </td>
              </tr>
            </table>


          </el-col>
        </el-row>

      </el-card>
    </el-skeleton>

    <template #footer>
      <el-button @click="dialogVisible = false" type="danger">关 闭</el-button>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { QrcodePayApi, QrcodePayVO } from '@/api/hospital/qrcodepay'
import { formatTime } from '@/utils'

/** 病案复印 表单 */
defineOptions({ name: 'QrcodePayRefundForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const loading = ref(true) // 加载中

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  refundPrice: undefined,
  refundReason: undefined,
})
const formRules = reactive({
  refundPrice: [{ required: true, message: '退款金额不能为空', trigger: 'blur' }],
  refundReason: [{ required: true, message: '退款原因不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '扫码支付退款'
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    loading.value = true
    try {
      formData.value = await QrcodePayApi.getQrcodePay(id)
    } finally {
      loading.value = false
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/**
 * 【ERP】格式化 Input 数字
 *
 * @param num 数量
 * @package digit 保留的小数位数
 * @return 格式化后的数量
 */
const handlePrice = (num: number | string | undefined, digit: number) => {
  if (num == null) {
    return ''
  }
  if (typeof num === 'string') {
    num = parseFloat(num)
  }
  // 如果非 number，则直接返回空串
  if (isNaN(num)) {
    return ''
  }
  return num.toFixed(digit)
}


/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async (type :String ) => {

  if(parseFloat(formData.value.refundPrice) <= 0){
    message.error('请输入退款金额')
    return
  }

  if(parseFloat(formData.value.refundPrice) > parseFloat(formData.value.totalPrice)){
    message.error('退款金额不能大于订单金额')
    return
  }


  // 校验表单
  await formRef.value.validate()

  // 确定要退款吗
  await message.confirm("确定要退款吗？")


  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value
    const result = await QrcodePayApi.refundQrcodePay(data)
    message.success('操作成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    refundPrice: undefined,
    refundReason: undefined,
  }
  formRef.value?.resetFields()
}
</script>


<style scoped>
:deep(.el-input-group__append) {
  padding: 0 5px;
}

:deep(.el-text) {
  color: #000000;
}

.medical-record-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #f2f3f5;
  table-layout: fixed;
}
.medical-record-table th, td {
  border: 1px solid #f2f3f5;
  padding: 3px 5px;
  text-align: left;
  height: 20px;
  overflow: hidden;
  font-size: 14px;
  color: #000000;
}
.medical-record-fill-color{
  background-color: #f5f7fa;
  border: 1px solid #f2f3f5;
  /*font-weight: bolder;*/
  color: #606266;
  width: 90px;
}

.file-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.file-table td {
  border: 0;
  padding: 3px 5px;
  text-align: left;
  height: 20px;
  overflow: hidden;
  font-size: 14px;
  color: #000000;
}

.dawn-color-flag {
  color: #dc2e2e !important;
  font-weight: 700;
}
.img-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img-box-img{
  width: 80px;
  height: 50px;
}
.img-box-text{
  margin-top: 3px;
}
</style>
